<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/Goalbeer/script/json2.js"></script>
<script type="text/javascript" src="/Goalbeer/script/jquery.js"></script>
<link href="/Goalbeer/script/goalbeer_main.css" rel="stylesheet" type="text/css">
<script type="text/javascript">

//ID 중복체크
$(document).ready(function(){ //페이지가 로딩될때
   $("#memberId").on("keyup",function(){
      $.ajax({
         type:"post",
         url:"${initParam.rootPath}/member/idCheck.do",
         data:{"idCheck":$("#memberId").val()},
         dataType:"json",
         beforeSend:function(){

            if($("#memberId").val().length<6){
            
               $("#msg").html("<font color='red'>ID는 6자리 이상 입력하세요.</font>");
               
               return false;//전송 x
               
            }else{
               $("#msg").html("");
            }
         },
         success:function(result){//result = map에 있는 값 , 넘어온 값
            
            $("#msg").html("<font color='green'>"+result.message+"</font>");
            
         }
      });//ajax
   });//on

//닉네임 중복 체크
$("#nickName").on("keyup",function(){
      $.ajax({
      type:"post",
      url:"${initParam.rootPath}/member/nickNameCheck.do",
      data:{"nickNameCheck":$("#nickName").val()},
      dataType:"json",
      beforeSend:function(){
         //var nickNameCheck = $("#nickName").val();
         if($("#nickName").val().length < 4){
            $("#msgNick").html("<font color='red'>닉네임은 4자리 이상 입력하세요.</font>");
            return false; //전송 x
         }else{
            $("#msgNick").html("");
         }
      },//before
      success:function(result){
         $("#msgNick").html("<font color='green'>"+result.message+"</font>");
      }

   });
});//on
});//ready


</script>

</head>
<body>

<div id="container" >   

   <div id="header_login">
      <c:choose>
         <c:when test="${sessionScope.login_member==null}">
         <jsp:include page="/member/login_form.jsp"/>
      </c:when>
      <c:otherwise>
         <jsp:include page="/member/login_success.jsp"/>
      </c:otherwise>
      </c:choose>
   </div>
   
   <div id="header">
      <jsp:include page="/include/indexTop.jsp"/>
   </div>
   <br><br><br>
<h1 align="center"><font size="120">회원 가입 양식</font></h1>
<form action="/Goalbeer/member/join.do" method="post">
   <table align="center">
   <tr>
       <td>ID :</td>
       <td><input type="text" id="memberId" name="memberId" maxlength="8"/><span id='msg'></span></td>
   </tr>
   <tr>
      <td>PW :</td> 
      <td><input type="password" id="memberPassword" name="memberPassword" maxlength="8"/></td>
      <td id="check_pw"></td>
   </tr>
   <tr>
      <td>이름 :</td> 
      <td><input type="text" id="memberName" name="memberName"maxlength="5"/></td>
   </tr>
   <tr>
      <td>닉네임 :</td> 
      <td><input type="text" id="nickName" name="nickName" maxlength="6"/><span id="msgNick"></span></td>
   </tr>
   <tr>
      <td>성별 :</td> 
      <td>남<input type="radio" name="gender" value="m"/>
             여<input type="radio" name="gender" value="f"/></td>
   </tr>
   <tr>   
      <td>전화번호 :</td>
      <td>
            <select id="phone" name="phone" value="번호">
               <option selected="selected" value="010">010</option>
               <option value="011">011</option>
               <option value="016">016</option>
            </select>
            <input type="text" name="phoneNumber1" size="2" maxlength="4">
            <input type="text" name="phoneNumber2" size="2" maxlength="4"></td>
   </tr>
   <tr>      
      <td>생년월일 :</td>
      <td><select id="birthYear" name="birthYear"><option value="birthYear">연도 선택</option><%for(int i=1950; i<=2010; i++){ %><option value="<%=i%>"><%=i+"년"%></option><%} %></select>
       <select id="birthMonth" name="birthMonth"><option value="birthMonth">월 선택</option> <%for(int i=1; i<=12; i++){ %><option value="<%=i%>"><%=i+"월"%></option><%} %></select>
       <select id="birthDay" name="birthDay"><option value="birthDay">일 선택</option><%for(int i=1; i<=31; i++){ %><option value="<%=i%>"><%=i+"일"%></option><%} %></select></td>
   </tr>
   <tr>       
      <td>Email :</td>
      <td><input type="text" id="email" name="email" size="5" maxlength="13"/>
            <select id="mailAddress" name="mailAddress">
                  <option>@naver.com</option>
                  <option>@hanmail.net</option>
                  <option>@daum.net</option>
                  <option>@gmail.com</option>
            </select></td>
   </tr>
   <tr>
      <td><input type="hidden" id="memberGrade" name="memberGrade" value="lev1"/></td>
   </tr>
   <tr>
      <td>
      <input type="hidden" id="memberLeave" name="memberLeave" value="mlt"/>
      </td>
   </tr>
   <tr rowspan="2" align="center">
   <td colspan="2"><input type="submit" value="회원가입"/>
          <input type="reset" value="다시 작성"/></td>
   </tr>
	
</table>
</form>  
  	<br><br><br><br><br>
<div id="footer" >
      <jsp:include page="/include/indexBottom.jsp"/>
   </div>
</div>    
</body>
</html>